<template>
  <div class="box1">
    <el-row class="box2">
      <el-col :span="23" :offset="1">
        <div class="demo-input-size">
          <el-input
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
            v-model="input1"
          >
          </el-input>
          <el-input
            placeholder="请输入手机号"
            prefix-icon="el-icon-phone-outline"
            v-model="input2"
          >
          </el-input>

          <el-select v-model="select3" placeholder="请选择用户状态">
            <el-option label="正常" value="1"></el-option>
            <el-option label="停用" value="2"></el-option>
          </el-select>

          <el-button type="primary" class="el-icon-zoom-in" @click="searchUser"
            >搜索</el-button
          >
          <el-button type="info" class="el-icon-refresh" @click="resetUser"
            >重置</el-button
          >
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="23" :offset="1">
        <el-button type="primary" plain @click="dialogFormVisible = true"
          >新增</el-button
        >
        <el-button type="success" icon="el-icon-edit" disabled plain
          >修改</el-button
        >
        <el-button type="danger" icon="el-icon-delete" disabled plain
          >删除</el-button
        >
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="23" :offset="1">
        <el-table
          ref="multipleTable"
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @row-click="rowClick"
        >
          <el-table-column type="selection"> </el-table-column>

          <el-table-column label="用户编号">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>

          <el-table-column prop="name" label="用户名"> </el-table-column>

          <el-table-column label="用户头像">
            <template slot-scope="scope">
              <img class="userimg" :src="scope.row.img" />
            </template>
          </el-table-column>

          <el-table-column prop="sex" label="用户性别"> </el-table-column>

          <el-table-column prop="age" label="用户年龄"> </el-table-column>

          <el-table-column prop="iphone" label="用户手机号"> </el-table-column>

          <el-table-column prop="emil" label="用户邮箱"> </el-table-column>

          <el-table-column label="用户角色">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.auth == 2" effect="dark"> 管理员 </el-tag>
              <el-tag v-else type="success" effect="dark"> 普通用户 </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="账号状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                @change="changeSwitch"
                :active-value="1"
                :inactive-value="2"
                active-text="正常"
                inactive-text="停用"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column prop="createTime" label="账户创建时间">
          </el-table-column>

          <el-table-column prop="modifTime" label="账户修改时间">
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="dialogFormVisible = true"
                circle
                style="margin-right: 20px"
              ></el-button>

              <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="这是一段内容确定删除吗？"
              >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  slot="reference"
                  circle
                ></el-button>
              </el-popconfirm>

            </template>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="13" :offset="1">
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :page-sizes="[5, 10, 15, 20]"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="totalNum"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserManage",
  data() {
    return {
      input1: "",
      input2: "",
      select3: "",
      tableData: [
        {
          id: 1,
          name: "王小虎",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-c0cbfbd0f6765d03cb45b5200af26e54_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667615946&t=054ade37270a3b9ac6c193ec89155889",
          sex: "女",
          age: 11,
          iphone: "13294560213",
          emil: "22@qq.com",
          auth: 1,
          status: 1,
          createTime: "2022-1-2",
          modifTime: "2022-3-1",
        },
        {
          id: 2,
          name: "王小猪",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-c0cbfbd0f6765d03cb45b5200af26e54_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667615946&t=054ade37270a3b9ac6c193ec89155889",
          sex: "男",
          age: 11,
          iphone: "13294560213",
          emil: "22@qq.com",
          auth: 2,
          status: 2,
          createTime: "2022-1-2",
          modifTime: "2022-3-1",
        },
        {
          id: 3,
          name: "王小明",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-c0cbfbd0f6765d03cb45b5200af26e54_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667615946&t=054ade37270a3b9ac6c193ec89155889",
          sex: "男",
          age: 11,
          iphone: "13294560213",
          emil: "22@qq.com",
          auth: 2,
          status: 1,
          createTime: "2022-1-2",
          modifTime: "2022-3-1",
        },
        {
          id: 4,
          name: "猪",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-c0cbfbd0f6765d03cb45b5200af26e54_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667615946&t=054ade37270a3b9ac6c193ec89155889",
          sex: "男",
          age: 11,
          iphone: "13294560213",
          emil: "22@qq.com",
          auth: 1,
          status: 1,
          createTime: "2022-1-2",
          modifTime: "2022-3-1",
        },
        {
          id: 5,
          name: "猪",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-c0cbfbd0f6765d03cb45b5200af26e54_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667615946&t=054ade37270a3b9ac6c193ec89155889",
          sex: "男",
          age: 11,
          iphone: "13294560213",
          emil: "22@qq.com",
          auth: 1,
          status: 1,
          createTime: "2022-1-2",
          modifTime: "2022-3-1",
        },
        {
          id: 6,
          name: "猪",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-c0cbfbd0f6765d03cb45b5200af26e54_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667615946&t=054ade37270a3b9ac6c193ec89155889",
          sex: "男",
          age: 11,
          iphone: "13294560213",
          emil: "22@qq.com",
          auth: 1,
          status: 1,
          createTime: "2022-1-2",
          modifTime: "2022-3-1",
        },
      ],
      // 当前页
      currentPage: 1,
      // 每页显示的数据条数
      pageSize: 5,
      // 总条数
      totalNum: 10,

      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    searchUser() {
      // 搜索按钮回调
      console.log(this.input1, this.input2, this.select3);
    },
    resetUser() {
      // 重置按钮
      (this.input1 = ""), (this.input2 = ""), (this.select3 = "");
    },
    handleSelectionChange(val) {
      // 每当选择发送变化时调此回调函数
      this.multipleSelection = val;
      console.log(val);
    },
    rowClick(val) {
      // 当列被点击时触发回调函数
      console.log(val);
    },
    changeSwitch(val) {
      // 用户状态的回调函数
      console.log(val);
    },
    handleSizeChange(val) {
      //每页条数改变时触发
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      // 当前页发生改变的回调
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
};
</script>

<style scoped>
.box1[data-v-1fc8b82e] {
  /* background-color: pink; */
  position: relative;
  top: 25px;
}
.box2 {
  /* background-color: rgb(4, 44, 117); */
  top: 4%;
  left: -5px;
}
.el-row {
  margin-bottom: 20px;
}
.el-input,
.el-select {
  width: 200px;
  margin-right: 50px;
}

.el-table {
  /* background-color: rgb(198, 95, 95); */
}
.el-table::before {
  width: auto;
}
.userimg {
  width: 120px;
  border-radius: 50%;
}
</style>